<div class="container iframe">
	<div class="row">
		<div class="col-md-12" style="padding:0 20px;">
			<form id="ajaxForm" action="<{:U('Appointment/save')}>" method="post" class="form-horizontal form-validata">
				<div class="form-group menteesBase">
					<img src="<{$toUser['face']|getFace=###}>">
					<p style="line-height:60px">To:<{$toUser['nickname']}></p>
				</div>	

				<div class="form-group">
					<label>Date</label>								
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
						<input type="text" class="form-control" id="datepicker" name="date" value="" placeholder="Enter date" data-rule-required="true" style="z-index:9999;">
					</div>
				</div>
				<div class="form-group">
					<label>Time</label>								
					<select name="time" id="time" class="form-control" data-rule-required="true">
						<option value="">Select</option>
						<option value="8:00 AM">8:00 AM</option>
						<option value="9:00 AM">9:00 AM</option>
						<option value="10:00 AM">10:00 AM</option>
						<option value="11:00 AM">11:00 AM</option>
						<option value="12:00 AM">12:00 AM</option>
						<option value="1:00 PM">1:00 PM</option>
						<option value="2:00 PM">2:00 PM</option>
						<option value="3:00 PM">3:00 PM</option>
						<option value="4:00 PM">4:00 PM</option>
						<option value="5:00 PM">5:00 PM</option>
						<option value="6:00 PM">6:00 PM</option>
						<option value="7:00 PM">7:00 PM</option>
						<option value="8:00 PM">8:00 PM</option>
						<option value="9:00 PM">9:00 PM</option>
						<option value="10:00 PM">10:00 PM</option>
					</select>
				</div>

				<div class="form-group">
					<label>Address</label>								
					<input type="text" class="form-control" id="address" name="address" placeholder="Street Address" data-rule-required="true">
				</div>
				<div class="form-group">							
					<input type="text" class="form-control" id="address1" name="address1" placeholder="Apartment,State,Unit etc.(Optional)"/>
				</div>

				<div class="row">
					<div class="form-group col-xs-4" style="margin-right:15px;">
						<label>City</label>
						<input type="text" class="form-control" id="city" name="city" data-rule-required="true">
					</div>

					<div class="form-group col-xs-4" style="margin-right:15px;">
						<label>State</label>
						<select name="state" id="state" class="form-control" data-rule-required="true">
							<option value="">--select--</option>
							<volist name="state" id="vo">
							<option value="<{$vo.name}>"><{$vo.name}></option>
							</volist>
						</select>
					</div>

					<div class="form-group col-xs-4" style="margin-right:0;">
						<label>Zip code</label>
						<input type="text" class="form-control" name="zip" id="zip" data-rule-required="true" data-rule-number="true" data-rule-zip="true">
					</div>				
				</div>

				<div class="form-group">
					<label for="exampleTextarea">Message</label>
					<textarea class="form-control" name="content" id="content" rows="5" data-rule-required="true"></textarea>
				</div>	

				<div class="form-group">				
					<button type="submit" id="myBtn" class="btn btn-success">Send</button>	
				</div>
				<input type="hidden" name="toID" value="<{$toUser['userid']}>">
				<input type="hidden" name="toName" value="<{$toUser['nickname']}>">
				<input type="hidden" name="toFace" value="<{$toUser['face']}>">
				<input type="hidden" name="fromID" value="<{$fromUser['userid']}>">
				<input type="hidden" name="fromName" value="<{$fromUser['nickname']}>">
				<input type="hidden" name="fromFace" value="<{$fromUser['face']}>">
			</form>
		</div>
	</div>
</div>
<script> 

$(function(){
	$("#datepicker" ).datepicker({
		minDate: new Date()
	});
	$.validator.addMethod("zip",function(value,element){
        return this.optional(element) || testZip(value);
    },"Invalid zip code");
});
</script>